<template>
  <div class="nav-header">
    <div class="menu-icon" @click="showSidebar = true">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-uniFC"></use>
      </svg>
    </div>
    <div class="nav-items">
      <div
        v-for="(item, index) in navItems"
        :key="index"
        class="nav-item"
        :class="{ active: currentIndex === index }"
        @click="switchTab(index)"
        ref="navItemsRef"
      >
        {{ item.name }}
      </div>
      <!-- 独立的指示器，会跟随当前索引移动，增加了visible控制 -->
      <div 
        class="indicator" 
        :class="{ 'invisible': !isPageStable }"
        :style="{ 
          left: indicatorPosition + 'px',
          transition: isInitialLoad ? 'none' : 'all 0.5s cubic-bezier(0.23, 1, 0.32, 1)'
        }"
      ></div>
    </div>
    <div class="search-icon" @click="goSearch">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-sousuo1"></use>
      </svg>
    </div>
    <!-- 侧边栏 -->
    <teleport to="body">
      <transition name="sidebar-slide">
        <div v-if="showSidebar" class="sidebar-mask" @click.self="showSidebar = false">
          <div class="sidebar-panel">
            <div class="sidebar-menu-scroll">
              <div class="sidebar-group" v-for="(group, gidx) in sidebarGroups" :key="gidx">
                <div class="sidebar-item" v-for="item in group" :key="item.text"
                  :class="{'sidebar-item-top': $index === 0, 'sidebar-item-bottom': $index === group.length-1}"
                  @click="handleSidebarItemClick(item.text)">
                  <div class="sidebar-icon">
                    <svg class="icon" aria-hidden="true" :style="{width: '44px', height: '46px'}">
                      <use :xlink:href="item.icon"></use>
                    </svg>
                  </div>
                  <span class="sidebar-text">{{ item.text }}</span>
                </div>
              </div>
            </div>
            <div class="sidebar-bottom">
              <div class="sidebar-bottom-item" v-for="item in sidebarBottom" :key="item.text" @click="handleSidebarBottomClick(item.text)">
                <svg class="icon" aria-hidden="true" :style="{width: '44px', height: '44px'}">
                  <use :xlink:href="item.icon"></use>
                </svg>
                <span class="sidebar-bottom-text">{{ item.text }}</span>
              </div>
            </div>
          </div>
        </div>
      </transition>
      <SettingDialog v-if="showSettingDialog" @close="showSettingDialog = false" />
    </teleport>
  </div>
</template>

<script>
import { ref, computed, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import SettingDialog from '@/components/SettingDialog.vue';

export default {
  name: 'NavHeader',
  components: { SettingDialog },
  props: {
    navItems: {
      type: Array,
      required: true
    },
    currentIndex: {
      type: Number,
      required: true
    },
    slideOffset: {
      type: Number,
      default: 0
    },
    isSliding: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { emit }) {
    const router = useRouter();
    const navItemsRef = ref([]);
    const indicatorPosition = ref(0);
    const isInitialLoad = ref(true);
    const showSidebar = ref(false);
    const showSettingDialog = ref(false);
    const isPageStable = ref(false); // 页面是否稳定
    // 侧边栏菜单分组
    const sidebarGroups = [
      [
        { icon: '#icon-faxianhaoyou', text: '发现好友' },
        { icon: '#icon-chuangzuozhongxin', text: '创作者中心' },
      ],
      [
        { icon: '#icon-wodecaogao', text: '我的草稿' },
        { icon: '#icon-wodepinglun', text: '我的评论' },
        { icon: '#icon-liulanjilu', text: '浏览记录' },
      ],
      [
        { icon: '#icon-shangdian', text: '友好市集' },
        { icon: '#icon-dingdan', text: '订单' },
        { icon: '#icon-gouwuche', text: '购物车' },
        { icon: '#icon-qianbao', text: '钱包' },
      ],
      [
        { icon: '#icon-zhibo', text: '直播' },
        { icon: '#icon-xiaochengxu', text: '小程序' },
      ],
      [
        { icon: '#icon-shequgongyue', text: '社区公约' },
      ]
    ];
    const sidebarBottom = [
      { icon: '#icon-saoyisao1', text: '扫一扫' },
      { icon: '#icon-kefu', text: '帮助与客服' },
      { icon: '#icon-shezhi1', text: '设置' },
    ];
    // 计算指示器位置
    const updateIndicatorPosition = () => {
      if (navItemsRef.value && navItemsRef.value.length > props.currentIndex) {
        const activeItem = navItemsRef.value[props.currentIndex];
        if (activeItem) {
          const itemWidth = activeItem.offsetWidth;
          const itemLeft = activeItem.offsetLeft;
          // 指示器宽度是60px，所以居中要减去30px
          indicatorPosition.value = itemLeft + itemWidth / 2 - 30;
        }
      }
    };
    watch(() => props.currentIndex, () => {
      updateIndicatorPosition();
    });
    onMounted(() => {
      // 延迟启用滑动功能，等待页面稳定
      setTimeout(() => {
        updateIndicatorPosition();
        // 设置页面已稳定
        isPageStable.value = true;
        
        // 再延迟一点关闭初始加载标记
        setTimeout(() => {
          isInitialLoad.value = false;
        }, 50);
      }, 300);
    });
    const switchTab = (index) => {
      emit('tab-change', index);
    };
    // 搜索按钮点击跳转
    const goSearch = () => {
      router.push('/search');
    };
    // 处理侧边栏点击
    const handleSidebarItemClick = (text) => {
      if (text === '友好市集') {
        showSidebar.value = false;
        router.push('/market');
      }
    };
    const handleSidebarBottomClick = (text) => {
      if (text === '设置') {
        showSidebar.value = false;
        showSettingDialog.value = true;
      }
    };
    return {
      navItemsRef,
      indicatorPosition,
      switchTab,
      isInitialLoad,
      showSidebar,
      sidebarGroups,
      sidebarBottom,
      goSearch,
      handleSidebarItemClick,
      showSettingDialog,
      handleSidebarBottomClick,
      isPageStable
    };
  }
}
</script>

<style scoped lang="less">
.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  padding: 0 40px;
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #fff;
  
  .menu-icon, .search-icon {
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .icon {
      width: 39px;
      height: 39px;
      font-size: 22px;
    }
  }
  
  .nav-items {
    display: flex;
    justify-content: center;
    flex: 1;
    position: relative;
    
    .nav-item {
      position: relative;
      padding: 0 30.15px;
      font-size: 32px;
      line-height: 100px;
      color: #9a9a9a;
      font-weight: 400;
      transition: all 0.3s ease;
      
      &.active {
        font-weight: 700;
        color: #000;
      }
    }
    
    .indicator {
      position: absolute;
      bottom: 22px;
      width: 60px;
      height: 5px;
      background-color: #fe2c55;
      border-radius: 2px;
      will-change: transform, left;
      
      // 添加不可见状态的样式
      &.invisible {
        opacity: 0;
      }
    }
  }
}
// 侧边栏动画
.sidebar-slide-enter-active, .sidebar-slide-leave-active {
  transition: all 0.3s cubic-bezier(.55,0,.1,1);
}
.sidebar-slide-enter-from, .sidebar-slide-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}
.sidebar-slide-enter-to, .sidebar-slide-leave-from {
  transform: translateX(0);
  opacity: 1;
}
.sidebar-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 2000;
  display: flex;
}
.sidebar-panel {
  width: 565px;
  height: 100vh;
  background: #f5f5f5;
  box-shadow: 2px 0 16px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.sidebar-menu-scroll {
  flex: 1;
  overflow-y: auto;
  max-height: 100vh;
  padding-bottom: 24px;
  margin-top: 40px;
}
.sidebar-group {
  background: #fff;
  border-radius: 24px;
  margin: 0 0 24px 25px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
  width: 515px;
}
.sidebar-item {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  gap: 32px;
  padding-left: 32px;
  background: transparent;
  border-radius: 0;
}
.sidebar-item-top {
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}
.sidebar-item-bottom {
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}
.sidebar-icon {
  width: 44px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-text {
  font-size: 30px;
  color: #222;
  font-weight: 500;
}
.sidebar-bottom {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #f5f5f5;
  padding: 32px 0 32px 0;
  border-top: 1px solid #ececec;
}
.sidebar-bottom-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  min-width: 100px;
  min-height: 100px;
  padding: 16px 0;
}
.sidebar-bottom-text {
  font-size: 26px;
  color: #888;
}
</style> 